<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>时间轴</title>
	<script src="../js/echarts.js"></script>
	<script src="../js/jquery-3.2.1/jquery-3.2.1.js"></script>
	<link rel="stylesheet" href="../js/layui/css/layui.css">
    <script src="../js/layui/layui.js"></script>
</head>
<body>
<div id="box" style="width:100%;height:800px"></div>
<script>
layui.use('layer', function(){
    var layer = layui.layer;
});
$(function(){
	
	var myChart=echarts.init(document.getElementById('box'));
	
	var listPropertyManager = [];//物业管理的金额
	var listDomesticTravel = [];//国内差旅的金额
	var listOfficialTraffic =[];//公务交通
	var listStaffForm = [];//员工福利
	var reimbursementTypeName = [];//报销类型的名称
	var listTime =[];//时间
	
	var reimbursementTypeNamess = [];
	var myChart=echarts.init(document.getElementById('box'));
    
	myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画 */
    
    $.ajax({
    	
		type:"POST",
		contentType:'application/json;charset=UTF-8',//关键是要加上这行
        //traditional:true,//这使json格式的字符不会被转码
        dataType:"json",
        async:true,
       	data : {},
       	url:"../echats/listPropertyManager.do",
             //返回数据形式为json
       	success:function(data){
      		console.log(data);
           //请求成功时执行该函数内容，result即为服务器返回的json对象
           if(data) {
              myChart.hideLoading();    //隐藏加载动画
              $.each(data,function(key,val){
            	  console.log(key+":"+val);
            	  console.log(val.getReimbursementTypeName[0].domesticTravel);
            	  console.log(val.getReimbursementTypeName[0].domesticTravel);
            	  console.log(val.getReimbursementTypeName[0].domesticTravel);
            	  console.log(val.getReimbursementTypeName[0].domesticTravel);
            	  
	              console.log(val.getReimbursementTime);
	              console.log(val.listTime[0].timeMap1)
	              for(var i=1;i<val.getReimbursementTime.length+1;i++){
	            	       console.log("---"+i);
	            	       listTime.push(val.listTime[0]["timeMap"+i]);
	            	       listPropertyManager.push(val.listPropertyManager[0]["propertyManager"+i]);
	            	       listDomesticTravel.push(val.listDomesticTravel[0]["domesticTravel"+i]);
	            	       listOfficialTraffic.push(val.listOfficialTraffic[0]["officialTraffic"+i]);
	            	       listStaffForm.push(val.listStaffForm[0]["staffForm"+i]);
	            	       console.log("-"+val.listPropertyManager[0]["propertyManager"+i]);
	            	       console.log("--"+val.listDomesticTravel[0]["domesticTravel"+i]);
	            	       console.log("---"+val.listOfficialTraffic[0]["officialTraffic"+i]);
	            	       console.log("----"+val.listStaffForm[0]["staffForm"+i]);
	              }
	               	
	               	
	               
            	  option = {
            	    	    title: {
            	    	        text: '个人报销总览'
            	    	    },
            	    	    tooltip : {
            	    	        trigger: 'axis',
            	    	        axisPointer: {
            	    	            type: 'cross',
            	    	            label: {
            	    	                backgroundColor: '#6a7985'
            	    	            }
            	    	        }
            	    	    },
            	    	    legend: {
            	    	        data:[val.getReimbursementTypeName[0].domesticTravel,val.getReimbursementTypeName[0].officialTraffic,val.getReimbursementTypeName[0].staffForm,val.getReimbursementTypeName[0].propertyManager]
            	    	    },
            	    	    toolbox: {
            	    	        feature: {
            	    	            saveAsImage: {}
            	    	        }
            	    	    },
            	    	    grid: {
            	    	        left: '3%',
            	    	        right: '4%',
            	    	        bottom: '3%',
            	    	        containLabel: true
            	    	    },
            	    	    xAxis : [
            	    	        {
            	    	            type : 'category',
            	    	            boundaryGap : false,
            	    	            data : listTime
            	    	        }
            	    	    ],
            	    	    yAxis : [
            	    	        {
            	    	            type : 'value'
            	    	        }
            	    	    ],
            	    	    series : [
            	    	        {
            	    	            name:val.getReimbursementTypeName[0].domesticTravel,
            	    	            type:'line',
            	    	            stack: '总量',
            	    	            areaStyle: {normal: {}},
            	    	            data:listDomesticTravel
            	    	        },
            	    	        {
            	    	            name:val.getReimbursementTypeName[0].officialTraffic,
            	    	            type:'line',
            	    	            stack: '总量',
            	    	            areaStyle: {normal: {}},
            	    	            data:listOfficialTraffic
            	    	        },
            	    	        {
            	    	            name:val.getReimbursementTypeName[0].staffForm,
            	    	            type:'line',
            	    	            stack: '总量',
            	    	            areaStyle: {normal: {}},
            	    	            data:listStaffForm
            	    	        },
            	    	        {
            	    	            name:val.getReimbursementTypeName[0].propertyManager,
            	    	            type:'line',
            	    	            stack: '总量',
            	    	            areaStyle: {normal: {}},
            	    	            data:listPropertyManager
            	    	        },
            	    	       
            	    	       
            	    	      
            	    	    ]
            	    	};
            	    myChart.setOption(option);
	               	
                  });
            
               
           } 
           
              
      },
       error : function(errorMsg) {
           //请求失败时执行该函数
       layer.msg("图表请求数据失败!");
       myChart.hideLoading();
       },
  });
	
	
	
	
    
     
});



   

</script>
	
</body>
</html>